<template>
  <baidu-map
    id="vueMapContainer"
    center="北京"
    ak="VabOvHDkrrcpgM4DLaFwzGtd9tfzvCVO"
    @ready="handler"
  >
  </baidu-map>
</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";

export default {
  components: {
    BaiduMap
  },
  methods: {
    // 地图 API 加载完毕后才能执行的代码
    handler({ BMap, map }) {
      // 创建点标记
      let marker1 = new BMap.Marker(new BMap.Point(116.404, 39.925));
      let marker2 = new BMap.Marker(new BMap.Point(116.404, 39.915));
      let marker3 = new BMap.Marker(new BMap.Point(116.395, 39.935));
      let marker4 = new BMap.Marker(new BMap.Point(116.415, 39.931));
      // 在地图上添加点标记
      map.addOverlay(marker1);
      map.addOverlay(marker2);
      map.addOverlay(marker3);
      map.addOverlay(marker4);
    }
  },
  beforeDestroy() {
    window.BMap = null;
  }
};
</script>

<style lang="stylus" scoped>
#vueMapContainer
    width 500px
    height 500px
    border: 2px solid black
</style>
